<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<script src="../../js/gsaucommon.js" type="text/javascript" charset="utf-8"></script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				height: 100%;
			}

			html {
				height: 100%;
			}
			/* 大盒子 */
			#addtableone {
			
				width: 1200px;
		/* 		box-shadow: 20px; */
				background-color: white;
				margin: 0 auto;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				margin-top: 20px;
			}
			#header{
				top:0px;
				background-color: white;
				position: sticky;
				z-index: 5;
				border: 2px solid #F8F8FF;
				margin-bottom: 30px;
			}
			#header #left{
				height: 80px;
				line-height: 80px;
				text-indent: 12px;
		
			}
			#header #right{
				height: 80px;
				
				line-height: 80px;
				/* font-size: 32px;
				font-weight: bold; */
				text-align: right;

			}

		</style>
	</head>
	<body>
		<div id="addtableone">
			<el-row id="header">
			  <el-col :span="12"><div class="grid-content bg-purple" id="left">
			  <h3>添加专利及软著</h3>
			  </div></el-col>
			  <el-col :span="12"><div class="grid-content bg-purple-light" id="right" style=" padding-right: 80px;">
			  <el-button type="primary" @click="back()">返回 </el-button>
			  </div></el-col>
			</el-row>
			
			<el-row style="padding-left: 40px;">
		
	
						<!-- 表单子属性有el-form-item,el-row(多个el-form-item)同级别,可自行删除不需要的-->
						<!-- 短框200px,长框300px,el-form-item width -->
						<!-- 选择框或输入框 label用于显示, value 与 VUE中对应属性绑定 -->
						<!--正则 el-form-item prop="值"  值和rules 中的规则对象绑定-->
						<!--最后的验证函数已经注释可正常提交 ,若想使用查看提交按钮处注释, -->
					    <!-- 	刊物级别,和论文类型 使用v-for,其他的是固定的 -->
						<!-- 出版时间和现在时间已经写好可直接使用,onsubmit函数中 -->
						<!--证明材料未设置必须提交,也未绑定table中的值 掌握文件上传后才自行设置-->
						<!--提交后表单信息归零函数未设置,后期自行设置-->
						<el-form  :model="form"  :rules="rules"  ref="ruleForm" label-width="165px" class="demo-ruleForm"  name>
							<el-row>
								<el-col :span="24" >
									<el-form-item label="填报人"  required>
										<el-input v-model="form.tianbaoName"  disabled style="width:235px;"  ></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="11" >
									<el-form-item label="专利或软件著作权名称" style="width: 500px;" prop="name"  required>
										<el-input v-model="form.name"></el-input>
									</el-form-item>
								</el-col>
								
								<el-col :span="12" >
									<el-form-item label="专利/软著号" style="width: 400px;" prop="zhuanliHao"  required>
									    <el-input v-model="form.zhuanliHao"></el-input>
									</el-form-item>
								</el-col>
								
							</el-row>

							<el-row>
								<el-col :span="11" >
									<el-form-item label="参加人数" style="width: 400px" prop="zongRenShu" required>
										<el-input v-model.number="form.zongRenShu"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="7">
									<el-form-item label="本人排名" style="width:400px" prop="meSort" required>
										<el-input v-model.number="form.meSort"></el-input>
									</el-form-item>
								</el-col>
								
								
							</el-row>
							<el-row>
								<el-col :span="8" >
									<el-form-item label="授予时间" style="width: 400px"  prop="shouYuDate" >
										<el-date-picker required type="date" placeholder="选择日期" v-model="form.shouYuDate" value-format="yyyy-MM-dd"
											style="width: 100%;"></el-date-picker>
									</el-form-item>
								</el-col>
							</el-row>

							<el-form-item label="证明材料" style="width: 700px" >	
								<el-upload class="upload-demo" drag :action="UploadUrl()"
								  :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
								  :on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload"
								  :file-list="fileList" accept=".pdf,.jpg,.png">
									<i class="el-icon-upload" ></i>
									<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
									<div class="el-upload__tip" slot="tip">只能上传jpg/png/pdf文件，且不超过500kb</div>
								</el-upload>
							</el-form-item>


							<el-form-item label="备注">
								<el-input type="textarea" style="width: 700px;" v-model="form.memo"></el-input>
							</el-form-item>

                          <!--  提交栏 -->
							<el-form-item>
								<el-button type="primary" @click="submitForm('ruleForm')" >添加信息</el-button>
								<el-button @click="resetForm('ruleForm')">重置</el-button>
							</el-form-item>
						</el-form>
				<!-- </el-col> -->
			</el-row>




		</div>
		<script type="text/javascript">
			new Vue({
				el: '#addtableone',
				data: {
					name:"",
					form: {
						name: "",
						zhuanliHao: "",
						shouYuDate: "",
						zongRenShu:'',
						tianbaoId:"",
						tianbaoName:"谯诗意",
						meSort:'',
						memo: "",
						deleted:0, 
						fileList: []
					},
					fileList:[],
					loading: false,
					lastuploadfile: '',
				    rules: {
					          name: [
								  { required: true, message: '请输入专利或软件著作权名称', trigger: 'blur' },
								  { min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur' }
					          ],
							  zhuanliHao:[
								  { required:true ,min: 1,  message: '长度至少1的字符', trigger: 'blur'}
							  ],
							  zongRenShu:[
								  {required:true,type: 'number',min: 1,  message: '长度至少1的数字', trigger: 'blur'},
							  ],
							  meSort:[
								  { required:true,type: 'number', message: '排名必须为数字值', trigger: 'blur'}
							  ],
					          shouYuDate: [
					            { type: 'string', required: true, message: '请选择授予时间', trigger: 'change' },
					          ]
				    }

				},
				//生命周期函数
				created() {

				},
				methods: {
				UploadUrl:function(){
					return "http://localhost:8080/zhuanlizhuanzhu/upload";   
					
				} ,
				back(){
					window.location.href="list.html"
				},
				//检验函数 若不符合则无法提交
				submitForm(ruleForm) {
					this.$confirm("请确定信息无误并添加","提示").then(()=>{
						this.$refs[ruleForm].validate((valid) => {
							if (valid) {
								this.onSubmit(this.form)
							} else {
								this.$message.error({
									message:'添加失败，请仔细检查信息',
									showClose: true,
								})
								return false;
							}
						})
					}).catch(()=>{
						this.$message.success({
							showClose: true,
							message:'取消添加成功',
						})
					})		
		        },
			   resetForm(ruleForm) {
				   this.$confirm("是否清空","提示").then(()=>{
					   this.$refs[ruleForm].resetFields();
					   this.$message.success({
						   showClose: true,
						   message:'清空成功',
					   })
				   }).catch(()=>{
					   this.$message.success({
						   showClose: true,
						   message:'取消清空成功',
					   })
				   })      
			   },	
			   onSubmit(form){
				   axios.post(window.gsau+"zhuanlizhuanzhu/add",this.form).then((res)=>{
					   console.log(res)
					   if(res.data.code==10010){
						   this.$message.success({message:'添加成功',showClose:true})
					   }else{
						   this.$message.error({message:'添加失败',showClose:true})
					   }
					})
			   },
			   handlePreview(file){
				   console.log("handlePreview")
				   console.log(file);
			   },
			   handleRemove(file, fileList) {
				   console.log(file, fileList);
				   console.log("handleRemove")
			    },
			   beforeRemove(file,fileList,fileMapprings){
					console.log("beforeRemove")
					//删除提交的表单表中要移除的文件
					let index = '';
					for (const i in fileList) {
						if (fileList[i] == file) {
							index = file.name;
							break;
						}
					}

					for (const i in this.form.fileList) {
						if (this.form.fileList[i] == index) {
							this.form.fileList.splice(i,1)
							break;
						}
					}			   
			   },
			   beforeUpload(){
				   this.loading = true 
			   },
			   uploadSuccess(response, file, fileList){
				   console.log(fileList)
				   if(response.code==10010){
					   this.lastuploadfile=response.data.newfilename
					   let m = {
						   oldFileName:'',
						   newFileName:'',
					   }
					   m.newFileName=response.data.newfilename
					   m.oldFileName=response.data.oldfilename
					   this.form.fileList.push(m)
					   this.$message.success(file.name + "文件上传成功")
				   }else{
					    this.$message.error(file.name + "文件上传失败,请重新上传")
						//删除上传列表中，失败的文件
						let index = 0;
						for(const i in fileList){
							if(fileList[i]==file){
								index=i
								break
							}
						}
						fileList.splice(index,1)
						this.$refs.uploadFile.clearFiles();
				   }
			   },
			   uploadError(err, file, fileList){
				  this.$message.error(file.name + "文件上传失败,请重新上传")
				  let index=0;
				  for(const i in fileList){
					  if(fileList[i]==file){
						  index=i
						  break
					  }
				  }
				  fileList.splice(index,1)
				  this.$refs.uploadFile.clearFiles();
				  this.loading = false
			   }
			}
		})
		</script>

	</body>


</html>
